<template>
	<view class="user-page">
		<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" mode=""></image>
		<!-- 我的 页面内容 -->
		<comNavHeight></comNavHeight>
		
		<view class="user-content font-hanserif-bold relative" :style="{ height: `calc(100vh - 178rpx - ${commonNavHeight})` }">

			<!-- 用户信息区域 -->
			<view class="userinfo-box relative flex-align-items-center">
				<view class="userinfo-avatar relative flex-all-center" style="width: 123rpx; height: 119rpx" @click="authUserLogin">
					<image class="relative" :src="userInfo.avatar" mode="" style="width: 98rpx; height: 98rpx; border-radius: 100%;"></image>
					<image class="bg" src="/static/images/user_imgs/avatar-user-bg.png"></image>
					<!-- <image :src="userInfo.vip_cover" class="head-cover" v-if="userInfo.vip_cover"></image> -->
				</view>

				<view class="userinfo-name">
					<view class="userinfo-name-text truncate font-hanserif-bold" v-if="token">{{ userInfo.nickname || '' }}</view>
					<view @click="authUserLogin" class="userinfo-name-text font-hanserif-bold" v-else>请点击登录~~~</view>
					<view class="userinfo-name-ids flex-all-center" v-if="token" @click="copyTxtData(userInfo.openid || '')">
						<view class="truncate" style="width: 300rpx">UID：{{ userInfo.openid || '' }}</view>
						<image src="/static/images/user_imgs/copy-icon.png" mode="" style="width: 28rpx; height: 28rpx; margin-left: 8rpx"></image>
					</view>
				</view>

				<button class="reset-button-css userinfo-contact absolute" open-type="contact" @click="gotoUserContact">
					<view class="flex-all-center">
						<image src="/static/images/user_imgs/contact-icon.png" mode="" style="width: 88rpx; height: 32rpx; margin-right: 10rpx"></image>
					</view>
				</button>
				
				<view class="user-recharge-recovery realtive">
					<!-- #ifdef MP-WEIXIN -->
					<image v-if="userInfo.show_recovery && commonConfigs && commonConfigs.domainFrontFileLink"
					@click="userInfo.show_recovery ? showInvestMoneySubmit() : ''"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/user/recharge-btn.png`"
					mode="" style="width: 132rpx; height: 48rpx;"></image>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && token"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/user/recharge-btn.png`"
					@click="showInvestMoneySubmit"
					mode="" style="width: 132rpx; height: 48rpx;"></image>
					<!-- #endif -->
				</view>
				
			</view>
			
			<!-- 充值及卡币等信息 --> 
			<view class="relative user-data-box-top flex" v-if="userInfo.show_recovery">
				
				<view class="user-card-box font-hanserif-bold flex flex-full flex-justify-content-between">
					<view class="user-card-coin flex-direction-column flex-align-items-center" @click="gooPageUrl('/secondary/userBillListPage/userBillListPage?type=balance', 1)">
						<view class="flex flex-align-items-center" style="margin-bottom: 16rpx;">
							<image
							v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/user/branch-icon.png`"
							mode="" style="width: 37rpx; height: 38rpx; margin-right: 8rpx"></image>
							<view> <text style="color: #FFFFFF;">旺卡能：</text></view>
						</view>
						<view class="user-card-branch_num">
							{{ userInfo.balance || '0' }}
						</view>
					</view>
					
					<view class="user-card-branch flex-direction-column flex-align-items-center" @click="gooPageUrl('/secondary/userBillListPage/userBillListPage?type=currency', 1)">
						<view class="flex flex-align-items-center" style="margin-bottom: 16rpx;">
							<image
							v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/user/currency-icon.png`"
							mode="" style="width: 37rpx; height: 40rpx; margin-right: 8rpx"></image>
							<view> <text style="color: #FFFFFF;">旺卡币：</text></view>
						</view>
						<view class="user-card-branch_num">
							{{ userInfo.currency_num || '0' }}
						</view>
					</view>
					
					
					<view class="user-card-ponit flex-direction-column flex-align-items-center" @click="gooPageUrl('/secondary/userBillListPage/userBillListPage?type=integral', 1)">
						<view class="flex flex-align-items-center" style="margin-bottom: 16rpx;">
							<image
							v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/user/point_icon.png`"
							mode="" style="width: 39rpx; height: 37rpx; margin-right: 8rpx"></image>
							<view style="color: #FF8B1D;"> <text style="color: #FFFFFF;">积分：</text></view>
						</view>
						<view class="user-card-branch_num">
							{{ userInfo.points || '0' }}
						</view>
					</view>
				</view>
				
			</view>
			
			<!-- 用户数据区域 -->
			<view class="user-data-box relative flex flex-direction-column flex-justify-content-around">
				<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:src="`${commonConfigs.domainFrontFileLink}/files/images/user/data-bg.png`" mode=""></image>
				<!-- vip等级信息 -->
				<view class="user-vip relative flex flex-align-items-center flex-justify-content-between">
					<view class="user-medal flex flex-align-items-center">
						<view class="user-medal-left relative flex flex-all-center">
							<image style="width: 116rpx;height: 124rpx;left: -8px;top: -14px;" :src="userInfo.vip_medal_cover" class="bg" mode=""></image>
						</view>
						<view :class="['user-medal-level relative flex flex-align-items-center absolute']">
							<image :src="`${commonConfigs.domainFrontFileLink}/files/images/user/medal-level-bg.png`" class="bg" mode=""></image>
							<view style="height: 100%;margin-left: 6rpx;">VIP{{userInfo.vip_level || 0}}</view>
							<image :src="`${commonConfigs.domainFrontFileLink}/files/images/user/level_${userInfo.vip_level}.png`" class="bg" mode=""></image>
						</view>
					</view>
					<view class="exp-progress font-hanserif-bold flex flex-direction-column flex-justify-content-center">
						<view class="exp-progress-text flex flex-wrap" v-if="(userInfo.total_exp - userInfo.remain_exp) > 0">
							<text class="level-text">{{userInfo.remain_exp || 0}} / {{userInfo.total_exp || 0}} </text> 
							<!-- <text style="white-space: nowrap;">距离下一级还需 {{((userInfo.total_exp * 100) - (userInfo.remain_exp * 100)) / 100 || 0}}</text> -->
							<text style="white-space: nowrap;">距离下一级还需 {{ expLength }}</text>
						</view>
						<view class="exp-progress-text" v-else>
							<text class="level-text">已满级</text>
						</view>
						<view class="exp-progress-box">
							<view class="exp-progress-bar" :style="{width: numCalculation(userInfo.remain_exp, userInfo.total_exp) * 100 + '%'}">
							</view>
						</view>
					</view>
					<view class="user-vip-btn relative flex flex-all-center" @click="gooPageUrl('/secondary/vipPage/vipPage', 1)">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/vip-detail-btn.png`" class="bg" mode=""></image>
					</view>
				</view>
				
				<view class="relative user-data-box-bottom flex-justify-content-between flex-align-items-center">
					<!-- #ifdef MP-WEIXIN -->
					<view class="user-data-item flex-direction-row flex-all-center" @click="gooPageUrl('/secondary/invitePage/invitePage')" v-if="userInfo.show_recovery">
						<image 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/user/invite-icon.png`" mode="" style="width: 170rpx; height: 68rpx;"></image>
						<!-- <view>邀请福利</view> -->
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="user-data-item flex-direction-row flex-all-center" @click="gooPageUrl('/secondary/invitePage/invitePage')">
						<image 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/user/invite-icon.png`" mode="" style="width: 170rpx; height: 68rpx;"></image>
						<!-- <view>邀请福利</view> -->
					</view>
					<!-- #endif -->
					<view class="user-data-item flex-direction-row flex-all-center" @click="gooPageUrl('/secondary/couponInfoPage/couponInfoPage', 1)">
						<image 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/user/coupon-icon.png`" mode="" style="width: 170rpx; height: 68rpx;"></image>
						<!-- <view>我的优惠券</view> -->
					</view>

					<view class="user-data-item flex-direction-row flex-all-center" @click="gooRecordPage(0)">
						<image 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/user/order-icon.png`" mode="" style="width: 170rpx; height: 68rpx;"></image>
						<!-- <view>发货管理</view> -->
					</view>
				</view>
			</view>

			<!-- 详情入口区域 -->
			<view class="user-detail-box flex-direction-row flex-wrap flex-justify-content-between relative">
				<view class="user-detail-item" v-for="(item, index) in userDetailList" :key="index" 
				v-if="(item.isOnline ? !commonOnline : true) && (item.show_recovery ? showUserRecovery : true)" @click="gooDetailPage(item)">
				
					<view class="user-detail-item-content relative">
						<image :src="`${commonConfigs.domainFrontFileLink}${item.imgIcon}`" mode="" style="width: 64rpx; height: 64rpx;margin: auto;"></image>
						
						<view class="message-tips absolute flex-all-center" v-if="item.name === '通知中心' && emailTotalCount">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								class="bg"
								style="width: 42rpx;height: 42rpx;"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/email-num-bg.png`" mode="">
							</image>
							<view class="relative">{{ emailTotalCount }}</view>
						</view>
						<view class="" style="font-size: 28rpx;color: #FFFFFF;margin-top: 14rpx;">{{ item.name }}</view>
					</view>

				</view>
				<view class="user-detail-item"></view>
				<view class="user-detail-item"></view>
				<view class="user-detail-item"></view>
			</view>
		</view>

		<comPopup v-model="showInvestMoneyUser" popupOfMaxHeight="1162rpx" 
		:conPopupBg="`${commonConfigs.domainFrontFileLink}/files/images/popup/invest-popup-bg.png`"
		backgroundSize="100% 100%"
		>
			<view class="invest-popup-box relative flex-justify-content-between flex-align-items-center flex-wrap">
				<view class="relative invest-popup-box-main-title font-hanserif-bold"> 
					<image class="bg" 
					style="height: 38rpx;right: 0;bottom: 0;margin: auto;"
					v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-box-mian-title-bg.png`"
					mode="heightFix"></image>
					<!-- <view class="relative">充值中心</view> -->
				</view>
				<view
					class="invest-popup-choose-price relative flex-all-center"
					:class="[payPriceIndexUser === index ? 'active' : '']"
					v-for="(item, index) of payPriceListUser"
					:key="index"
					@click="setPayPriceUser(index)"
				>
					<image class="bg" :src="payPriceIndexUser === index ? `${commonConfigs.domainFrontFileLink}/files/images/popup/popup-item-active-bg.png` : `${commonConfigs.domainFrontFileLink}/files/images/popup/popup-item-bg.png`" mode=""></image>
					<view class="relative font-hanserif-bold">
						{{ item }}
					</view>
				</view>
				<view style="height: 0; width: 200rpx"></view>
				<view style="height: 0; width: 200rpx"></view>
			</view>

			<view class="invest-popup-box relative flex-justify-content-between flex-align-items-center flex-wrap font-hanserif-bold">
				<view class="invest-popup-box-txt-title"> 输入充值金额 </view>
				<view class="relative invest-popup-input">
					<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/input-pay-price-bg.png`" mode=""></image>
					<input v-model="payPriceUser" type="digit" class="invest-popup-input-price" />
				</view>
			</view>

			<comPayType ref="comPayType" v-if="showInvestMoneyUser" v-model="currentPayType" fromSence="investMoney"></comPayType>

			<view class="" style="margin: 0 30rpx">
				<comUserAgreement v-if="showInvestMoneyUser" v-model="isAcceptAgreement" :isShowOrderAgreeUppop="userInfo.is_view_pay_agreement"></comUserAgreement>
			</view>

			<view class="relative" style="width: 100%; height: 1rpx; background: transparent; opacity: 0.4; margin-top: 46rpx"></view>

			<template #footer>
				<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-bottom-bg.png`"
					style="width: 750rpx;height: 210rpx;top: -64rpx;left: -32rpx;"
					mode=""></image>
				<view class="relative flex flex-justify-content-between flex-align-items-center" style="padding: 0rpx 0 40rpx">
					<view class="" style="font-size: 30rpx; color: #111111">
						<template v-if="payPriceUser">
							<text style="font-size: 44rpx">¥{{ payPriceUser }}</text>
						</template>
					</view>
					<comSubmitBtn class="relative" @click="payPriceSubmit"> 确认充值 </comSubmitBtn>
				</view>
			</template>
		</comPopup>
		
		<view class="maskview fixed" v-if="boxSecMask" :zoom="true" @click="closeBoxSecMask">
			<view class="mask-box-content absolute" @click.stop="boxSecMask = true">
				<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/competition/confirm-box-bg.png`"
					mode="">
				</image>
				<image class="mask-close absolute"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close.png`" mode=""
					@click.stop="closeBoxSecMask"></image>
					
				<view class="box-info-title relative">
					<text>支付信息</text>
				</view>
				<view class="box-info-list relative font-hanserif-regular">
					<view>　　姓名: {{ lianlianInfo.name }}</view>
					<view>　手机号: {{ lianlianInfo.phone }}</view>
					<!-- <view>　身份证: {{ lianlianInfo.id_no }}</view> -->
					<view>所在城市: {{ lianlianInfo.delivery_addr_province_name === lianlianInfo.delivery_addr_city_name ? lianlianInfo.delivery_addr_province_name : lianlianInfo.delivery_addr_province_name　+ ' ' + lianlianInfo.delivery_addr_city_name　 }}</view>
				</view>
				<view class="bag-send-tip-txt absolute font-hanserif-bold">
					提示: 请确保支付信息正确！
				</view>
				
				<view class="flex-all-center bag-send-agreement absolute">
					<view class="flex-all-center" @click="isShowPayAgree = !isShowPayAgree">
						<image v-show="!isShowPayAgree" src="/static/images/public_imgs/select.png" style="width: 26rpx; height: 26rpx" mode=""> </image>
						<image v-show="isShowPayAgree" src="/static/images/public_imgs/selecting.png" style="width: 26rpx; height: 26rpx" mode=""> </image>
						<view class="" style="margin-left: 10rpx; color: #111111"> 我已阅读并同意: </view>
					</view>
					<view style="color: #FF8B1D;" @click="readPayAgreement">《服务协议》</view>
				</view>
				
				<view class="bag-send-box-btn flex-justify-content-center absolute font-hanserif-bold">
					<view class="bag-btns left-btn relative flex-all-center" @click.stop="eidtBoxSecMask">
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/null-popup-close-btn.png`"
							mode=""></image>
						<text class="relative">编辑</text>
					</view>
					
					<view class="bag-btns bag-right-btn relative flex-all-center" @click.stop="payPriceSubmit('lianlianPay')">
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/null-popup-sure-btn.png`"
							mode=""></image>
						<text class="relative">确认支付</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import store from '@/store';

	import { ACTIONS } from '@/store/modules/userStore';

	import {
		getLianlianCheckAPi, // 连连支付预请求前查询
		getUserBalanceOrderApi, // 生成充值订单
		getUserBalanceOrderConfirmApi ,// 充值结果
		getRequestNumApi // 授权次数
	} from '@/setupproject/INTERFACE';

	import { payment } from '@/setupproject/PAYS_FUN';

	import {
		setAsyncFunWait,
		wxAuthSetFun,
		setAuthPhoneUsers,
		showAuthAPP,
		addPhoneSetFun
	} from '@/setupproject/TOOLS_FUN';
	
	import otherpay from '@/inmixed/otherpay.mixin.js'

	export default {
		name: 'tabUser',
		props: {
			tabCurrentIndex: {
				type: String,
				default: () => ''
			},
			emailTotalCount: {
				type: Number,
				default: () => 0
			},
		},
		mixins: [otherpay],
		data() {
			return {
				isShowPayAgree: false,
				lianlianInfo: {},
				boxSecMask: false,
				showUserRecovery: true,
				showInvestMoneyUser: false,
				currentPayType: '',
				apiPayTypeVal: 1,
				payBeInfos: {
					isPayBackSence: false,
					type: null,
					order_num: null,
					payBeScene: ''
				},
				payPriceUser: '',
				payPriceListUser: [50.8, 100.8, 300.8, 500.8, 1000.8, 2000.8, 3000.8, 5000.8, 10000.8],
				payPriceIndexUser: 0,
				submitLoading: false,
				isAcceptAgreement: false,
				userDetailList: [
					{ id: '5', name: '我的账单', imgIcon: '/files/images/user/bill-img.png', url: '/secondary/userBillListPage/userBillListPage?type=bill', isLogin: true },
					{ id: '8', name: '积分记录', imgIcon: '/files/images/user/integral-img.png', url: '/secondary/userBillListPage/userBillListPage?type=integral', isLogin: true },
					// #ifdef MP-WEIXIN
					{ id: '3', name: '进击记录', imgIcon: '/files/images/user/jinji-img.png', url: '/secondary/returnRecordPage/returnRecordPage', isLogin: true, show_recovery: true },
					// #endif
					// #ifndef MP-WEIXIN
					{ id: '3', name: '退货记录', imgIcon: '/files/images/user/recovery-img.png', url: '/secondary/returnRecordPage/returnRecordPage', isLogin: true, show_recovery: true },
					// #endif
					{ id: '10', name: '通知中心', imgIcon: '/files/images/user/notify-img.png', url: '/secondary/notifyPage/notifyPage', isLogin: true, show_recovery: false },
					{ id: '1', name: '个人资料', imgIcon: '/files/images/user/person-img.png', url: '/secondary/personInfoPage/personInfoPage', isLogin: true, show_recovery: true },
					{ id: '6', name: 'APP下载', imgIcon: '/files/images/user/app-img.png', url: '', isLogin: false, isOnline: true },
					{ id: '7', name: '福利群', imgIcon: '/files/images/user/kefu-img.png', url: '', isLogin: false, isOnline: true },
					{ id: '2', name: '通用设置', imgIcon: '/files/images/user/setting-img.png', url: '/secondary/commonSettingPage/commonSettingPage', isLogin: false },
					{ id: '12', name: '合成福袋', imgIcon: '/files/images/user/red-envelope-img.png', url: '/secondary/redEnvelopePage/redEnvelopePage', isLogin: true, show_recovery: true, isOnline: true },
					{ id: '14', name: '投诉建议', imgIcon: '/files/images/user/suggestion-img.png', url: '/secondary/suggestionsPage/suggestionsPage', isLogin: true },
				],
			};
		},
		created() {
			uni.$on('update', async (tabCurrentIndex) => {
				if (tabCurrentIndex === 'tabUser') {
					// Update事件：子组件重绘页面
					this.loadDataGetFun();
				}
			});
		},
		computed: {
			expLength() {
				// 精度问题
				return ((this.userInfo.total_exp * 1000 - this.userInfo.remain_exp * 1000) / 1000).toFixed(2);
			},
			token() {
				return this.$store.getters.token;
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
			commonNavHeight() {
				return this.$store.getters.commonNavHeight + 'px';
			},
			// 支付订单结果
			orderPayStatusPopup() {
				return this.$store.getters.orderPayStatusPopup || {};
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonOnline() {
				return store.getters.commonOnline;
			},
		},
		watch: {
			async showInvestMoneyUser(v) {
				if (v) {
					this.payPriceUser = this.payPriceListUser[this.payPriceIndexUser];
					await store.dispatch(ACTIONS.USER_INFO_GET_FUN);
					if (!this.userInfo.is_view_pay_agreement) return this.$store.commit('SHOW_AGREEMENT_SET_FUN', true);
				} else {
					this.submitLoading = false;
				}
			},

			payPriceIndexUser(v) {
				this.payPriceUser = this.payPriceListUser[v] || '';
			},

			payPriceUser(v) {
				if (v > 10000.8) {
					uni.showToast({
						icon: 'none',
						title: '单笔充值最多10000.8哦~'
					});
					setTimeout(() => {
						this.payPriceUser = 10000.8;
					}, 100);
				}
			},
			
			async orderPayStatusPopup(pay_status) {
				if (pay_status) {
					await store.dispatch(ACTIONS.USER_INFO_GET_FUN);
					this.showInvestMoneyUser = false;
				}
			}
		},
		onShow() {},
		methods: {
			closeBoxSecMask() {
				// this.submitLoading = false;
				this.boxSecMask = false;
				this.isShowPayAgree = false;
			},
			
			eidtBoxSecMask() {
				uni.navigateTo({
					url: `/secondary/lianlianInfoPage/lianlianInfoPage?item=${JSON.stringify(this.lianlianInfo)}`
				});
				this.boxSecMask = false;
				this.isShowPayAgree = false;
			},
			
			async gotoLianlianOper() {
				const { data: dataLian, code: codeLian, msg: msgLian } = await getLianlianCheckAPi();
				
				if (codeLian !== 200) {
					this.submitLoading = false;
					uni.showToast({
						icon: 'error',
						title: msgLian
					});
					
					return true;
				}
				
				if(!dataLian.is_bind) {
					uni.showToast({
						icon: 'error',
						title: '未绑定信息！'
					});
					
					await setAsyncFunWait(1000);
					
					uni.navigateTo({
						url: '/secondary/lianlianInfoPage/lianlianInfoPage'
					});
					
					return true;
				}
				
				this.lianlianInfo = dataLian.info || {};
				this.boxSecMask = true;
				
				return true;
			},
			
			// APP 没有token情况下 提示登录
			gooLoginApp() {
				// #ifdef APP-PLUS
				if (!this.token) {
					this.gooLoginFun('phone');
					return true;
				}
				// #endif
				return false;
			},

			// APP场景登陆
			async gooLoginFun(typeName) {
				uni.showLoading({
					title: '',
					mask: true
				});

				// 一键登录 & 手机验证码登录
				if (typeName === 'phone') {
					uni.preLogin({
						provider: 'univerify',
						success: async () => {
							await store.dispatch('LOGIN_GET_FUN', {
								loginType: 'univerify'
							});

							await uni.hideLoading();
						},
						fail: (res) => {
							// 预登录失败 进入 手机验证码登陆
							uni.navigateTo({
								url: '/app_page/login/login'
							});
							uni.hideLoading();
						},
						complete: (e) => {
							console.log('univerify:', e);
							uni.hideLoading();
						}
					});
				}
			},

			// 显示充值弹框
			async showInvestMoneySubmit() {
				// #ifdef MP-WEIXIN
				// 支付前验证是否已登录
				if (!wxAuthSetFun()) return;
				// #endif

				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// 支付前验证是否已绑定手机
				if (addPhoneSetFun()) return;
				// #endif
				
				// 随机减数
				this.payPriceListUser = [50, 100, 300, 500, 1000, 2000, 3000, 5000, 10000];
				this.payPriceListUser = this.payPriceListUser.map(item => {
					return (item - (Math.random(0, 1) * 0.5)).toFixed(2);
				})
				
				// 充值温馨提醒
				this.getPayNotice();

				this.showInvestMoneyUser = true;
			},

			// 切换充值金额选项
			setPayPriceUser(index) {
				this.payPriceIndexUser = index;
			},
			
			// 父组件tabbar触发当前子组件事件
			async loadDataGetFun() {
				if (this.token) {
					await this.$store.dispatch('USER_INFO_GET_FUN');
				}
				
				// #ifdef MP-WEIXIN
				this.showUserRecovery = this.userInfo.show_recovery;
				// #endif
				
				// 如果是wxpay || alipay_h5（alipay），tabbar监听onshow，update触发支付结果
				this.submitLoading = false;

				// 监听返回当前平台时触发支付结果事件
				if(this.payBeInfos.isPayBackSence && ['lianlianpay', 'adapay_mini', 'alipay', 'yeepay_wx', 'adapay_alipay', 'mbpay_jump_mini'].includes(this.currentPayType)){
					this.payBeInfos.isPayBackSence = !this.payBeInfos.isPayBackSence;
					this.$store.commit('SET_WATCH_PLAT_PARAMS', {
						'type': this.payBeInfos.type,
						'balance_order_num': this.payBeInfos.balance_order_num,
						'msg': '充值成功~',
						'orign_scene': 'user',
					});
				}
				
			},
			
			// 登陆
			async authUserLogin() {
				// #ifdef MP-WEIXIN
				
				const {
					code,
					msg,
					data,
				} = await getRequestNumApi();
				
				if (!data.is_allow) {
					return uni.showToast({
						icon: "error",
						title: data.msg,
					})
				}
				
				setAuthPhoneUsers(true);
				// #endif
			
				// #ifdef APP-PLUS
				if (this.token) {
					// 预登录失败 进入 手机验证码登陆
					uni.navigateTo({
						url: '/app_page/settings/settings'
					});
				} else {
					this.gooLoginApp('phone');
				}
				// #endif
			},
			
			readPayAgreement() {
				const href_url = encodeURIComponent('https://static.lianlianpay.com/accpweb/agreement/OpenAccountAgree_NOT_ACS.html');
				uni.navigateTo({
					url: `/secondary/webViewPage/webViewPage?src=${href_url}`
				})
			},

			async payPriceSubmit(paySence) {
				if (!this.isAcceptAgreement) {
					return uni.showToast({
						title: '须同意《购买协议》、《隐私条款》才能进行支付！',
						icon: 'none'
					});
				}
				
				// 连连支付 - 二次确认弹框
				if (['lianlianpay'].includes(this.currentPayType) && paySence !== 'lianlianPay') {
					return this.gotoLianlianOper();
				}
				if (['lianlianpay'].includes(this.currentPayType) && paySence === 'lianlianPay' && !this.isShowPayAgree) {
					return uni.showToast({
						icon: 'none',
						title: '需阅读并同意《服务协议》'
					});
				}
				
				if (this.submitLoading) return;
				this.submitLoading = true;
				
				if(!this.currentPayType && this.$refs.comPayType) {
					// 选择充值方式事件
					this.$refs.comPayType.payTypeRadioChange();
				}
				
				let payType = this.currentPayType || 'wxpay';
				
				const { data, code, msg } = await getUserBalanceOrderApi({
					money: this.payPriceUser,
					pay_channel: payType
				});

				if (code !== 200) {
					this.submitLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}

				data.payPriceUser = this.payPriceUser;
				
				if (['lianlianpay'].includes(this.currentPayType)) {
					// 打开成功
					this.payBeInfos.type = this.apiPayTypeVal;
					this.payBeInfos.balance_order_num = data.balance_order_num;
					this.payBeInfos.isPayBackSence = true;
					
					this.submitLoading = false;
					this.boxSecMask = false;
					this.isShowPayAgree = false;
					
					const href_url = encodeURIComponent(data.pay_config.gateway_url);
					return uni.navigateTo({
						url: `/secondary/webViewPage/webViewPage?src=${href_url}`
					})
				}
				
				// 小程序支付
				if (['adapay_mini', 'yeepay_wx', 'adapay_alipay', 'mbpay_jump_mini'].includes(this.currentPayType)) {
					return this.launchMPToPayFun(data, this.currentPayType, 'user');
				}
				
				// 原生支付： 微信、小程序、支付宝
				if (['wxapp', 'wxpay', 'alipay_method', 'mbpay_wxmini'].indexOf(this.currentPayType) !== -1) {
					try {
						await payment(data, payType, this.apiPayTypeVal); 
						await getUserBalanceOrderConfirmApi({
							type: 1, // type	是	string	支付场景类型 余额充值为1
							balance_order_num: data.balance_order_num
						});
						this.submitLoading = false;
						this.showInvestMoneyUser = false;
						uni.showToast({
							title: '充值成功~',
							icon: 'success'
						});
						await setAsyncFunWait(1500);
						store.dispatch(ACTIONS.USER_INFO_GET_FUN);
					} catch (err) {
						this.submitLoading = false;
						console.error(err);
					}
					return;
				}
				

			},
			
			// 跳转
			async gooPageUrl(url, isLogin = 0) {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (isLogin && await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
			
				uni.navigateTo({
					url: url
				});
			},
			
			async gooRecordPage(index) {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
			
				uni.navigateTo({
					url: '/secondary/deliveryManagementPage/deliveryManagementPage?index=' + index
				});
			},
			
			numCalculation(nums, sums) {
				let res = 0;
				if (sums == 0) {
					res = 1;
				} else {
					res = nums / sums > 1 ? 1 : nums / sums;
				}
				return res;
			},

			// 文本复制
			copyTxtData(data) {
				uni.setClipboardData({
					data,
					success: function () {
						uni.showToast({
							title: `已复制：${data}`,
							icon: 'none'
						});
					}
				});
			},

			// APP 调起微信客服
			gotoUserContact() {
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '',
					mask: true
				});

				// 启用拉起客服功能
				uni.share({
					provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
					openCustomerServiceChat: true, // 是否启用拉起客服功能
					corpid: this.$store.getters.commonCustomerWechat.wechatKFcorpid || this.$store.getters.commonConfigs.wechatKFcorpid, // 企业ID
					customerUrl: this.$store.getters.commonCustomerWechat.wechatKFcusUrl || this.$store.getters.commonConfigs.wechatKFcusUrl, // 客服链接
					success: function (result) {
						console.log('success result:' + JSON.stringify(result));
					},
					fail: function (error) {
						console.log('fail error:' + JSON.stringify(error));
					},
					complete: function (result) {
						console.log('complete result:' + JSON.stringify(result));
						uni.hideLoading();
					}
				});
				setTimeout(function () {
					uni.hideLoading();
				}, 2000);
				// #endif
			},

			// 列表事件
			async gooDetailPage(item) {
				if (item.isLogin) {
				// #ifdef MP-WEIXIN
				// 支付前验证是否已登录
				if (!wxAuthSetFun()) return;
				// #endif

				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
                }

				// 福利群
				if (item.id === '7') {
					store.commit('SHOW_GROUP_SET_FUN', true);
				}
				// app下载
				if (item.id === '6') {
					store.commit('APP_QRCODE_SET_FUN', true);
				}
				uni.navigateTo({
					url: item.url
				});
			},
			
		}
	};
</script>

<style lang="scss">
	.user-page {
		font-size: 28rpx;
		color: #111111;
		
		.user-content {
			width: 100%;
			overflow-x: hidden;
			margin-top: 14rpx;
			overflow-y: auto;
			padding: 12rpx 0rpx 68rpx;

			.userinfo-box {
				margin-bottom: 30rpx;
				padding: 0 22rpx;
				.userinfo-avatar {
					margin-right: 36rpx;
					.head-cover{
						width: 140rpx;
						height: 140rpx;
						position: absolute;
						top: -14rpx;
						left: -10rpx;
					}
				}
				.userinfo-name {
					.userinfo-name-text {
						max-width: 330rpx;;
						font-size: 32rpx;
						color: #FFFFFF;
					}
					.userinfo-name-ids {
						margin-top: 26rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				
				.user-recharge-recovery {
					position: absolute;
					right: 24rpx;
					top: 60rpx;
				}
				
				.userinfo-contact {
					top: 0;
					right: 26rpx;
					width: 90rpx;
				}
			}
			
			.user-data-box-top {
				width: 100%;
				margin: 50rpx 16rpx;
				.user-recharge-box {
					margin-right: 30rpx;
				}
				.user-card-box {
					height: 100%;
					font-size: 24rpx;
					color: #111111;
					font-weight: bold;
					.user-card-coin {
						width: 100%;
					}
					.user-card-branch {
						width: 100%;
						// border-left: 2rpx solid rgba(255, 218, 60, .35);
						// border-right: 2rpx solid rgba(255, 218, 60, .35);
					}
					.user-card-ponit {
						width: 100%;
					}
					.user-card-branch_num {
						background-image: linear-gradient(to right, #FFFFFF, #A2FCED);
						-webkit-background-clip: text;
						color: transparent;
						font-size: 32rpx;
					}
				}
			}

			.user-data-box {
				height: 336rpx;
				padding: 0rpx 30rpx;
				margin: 0 14rpx 76rpx;
				
				.user-vip{
					// margin-top: 20rpx;
					// padding: 0 10rpx;
					.user-medal{
						width: 100rpx;
						// margin-right: 16rpx;
						
						.user-medal-left{
							width: 84rpx;
							height: 68rpx;
							z-index: 3;
						}
						
						.user-medal-level{
							width: 104rpx;
							height: 28rpx;
							
							left: 46rpx;
							top: 56rpx;
						
							font-size: 25rpx;
							font-weight: bold;
							font-style: italic;
							color: #FFFFFF;
							
							// background: linear-gradient(0deg, #FA9E55 0%, #111111 100%);
							// -webkit-background-clip: text;
							// -webkit-text-fill-color: transparent;
							
							image {
								z-index: 1;
								left: -38rpx;
							}
							
						}
					}
					.exp-progress{
						width: 286rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						margin-top: 48rpx;
						.level-text{
							color: #79F6FF;
							margin-right: 4rpx;
						}
						.exp-progress-box{
							width: 286rpx;
							height: 16rpx;
							border-radius: 8rpx;
							margin-top: 16rpx;
							background: #FFFFFF;
							.exp-progress-bar{
								border-radius: 8rpx;
								height: 16rpx;
								background: #4EF1FE;
							}
						}
					}
					.user-vip-btn{
						width: 176rpx;
						height: 72rpx;
						margin-top: 48rpx;
					}
				}

				.user-data-box-bottom {
					color: #111111;
					font-size: 24rpx;
					margin-top: -60rpx;
					// margin-left: 24rpx;
				}
			}

			// 详情入口区域
			.user-detail-box {
				width: 100%;
				margin-bottom: 32rpx;
				padding: 0 14rpx;
				.user-detail-item {
					width: 25%;
					margin-bottom: 16rpx;
					.user-detail-item-content {
						text-align: center;
						margin-bottom: 52rpx;
						.message-tips {
							line-height: 42rpx;
							text-align: center;
							padding: 0 6rpx;
							left: 28rpx;
							top: 0rpx;
							min-width: 42rpx;
							height: 42rpx;
							font-size: 20rpx;
							color: #fff;
						}
					}
				}
			}
		}

		// 充值弹框
		.invest-popup-box {
			font-size: 30rpx;
			color: #111111;
			margin: 0 20rpx 20rpx;
			
			.invest-popup-box-mian-title {
				margin-top: 98rpx;
				text-align: center;
				font-size: 36rpx;
			}
			
			.invest-popup-box-main-title {
				width: 100%;
				margin-top: 50rpx;
				margin-bottom: 64rpx;
			}

			.invest-popup-box-txt-title {
				width: 100%;
				font-size: 34rpx;
				margin-top: 24rpx;
				margin-bottom: 28rpx;
			}

			.invest-popup-choose-price {
				width: 227rpx;
				height: 55rpx;
				margin-bottom: 24rpx;
				color: #E1E4E7;
				
				&.active {
					color: #FFFFFF;
				}
			}

			.invest-popup-input {
				font-size: 32rpx;
				width: 100%;
				height: 80rpx;
				.invest-popup-input-price {
					width: 100%;
					height: 80rpx;
					padding-left: 24rpx;
				}
			}
		}
	
	
		.maskview {
			color: #111111;
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			z-index: 10002;
			background: rgba(0, 0, 0, 0.78);
			overflow: hidden;
	
			.mask-box-content {
				width: 550rpx;
				height: 320rpx;
				padding: 36rpx 16rpx 0;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
	
				.mask-close {
					right: 20rpx;
					top: 30rpx;
					width: 50rpx;
					height: 52rpx;
					z-index: 10;
				}
				
				.box-info-title {
					color: #184971;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
					white-space: nowrap;
				}
	
				.box-info-list {
					width: 100%;
					min-height: 198rpx;
					font-size: 30rpx;
					color: #111111;
					left: 0;
					right: 0;
					top: 0rpx;
					margin: auto;
					overflow-y: auto;
				}
	
				.bag-send-tip-txt {
					font-size: 24rpx;
					color: #DB811A;
					width: 100%;
					text-align: center;
					left: 0;
					right: 0;
					
					bottom: -50rpx;
					margin: auto;
				}
				
				.bag-send-agreement {
					left: 0;
					right: 0;
					margin: auto;
					font-size: 26rpx; 
					bottom: -10rpx;
					text-align: center;
					height: 80rpx;
					line-height: 100%;
					color: #FFFFFF;
				}
	
				.bag-send-box-btn {
					font-size: 30rpx;
					left: 0;
					right: 0;
					margin: auto;
					bottom: -166rpx;
	
					.bag-btns {
						font-size: 30rpx;
						color: #FFF;
						width: 202rpx;
						height: 66rpx;
						line-height: 66rpx;
						text-align: center;
					}
	
					.bag-right-btn {
						margin-left: 54rpx;
					}
				}
			}
		}
		
	}
</style>
